<template>
  <div>
    <transition name="animation">
      <el-card class="box-card" v-show="flag">
        <div slot="header" class="clearfix">
          <h3>职务管理</h3>
        </div>
        <el-button type="primary">导出</el-button>
        <el-button type="success" @click="dialogFormVisible = true"
          >新增</el-button
        >
        <template>
          <el-table
            :data="tableData"
            style="width: 100%"
            stripe
            :header-cell-style="{
              background: '#f5f7f9',
              borderTop: '1px solid #ebeef5',
              textAlign: 'center',
            }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="职务名称"> </el-table-column>
            <el-table-column prop="num" label="在职人数"> </el-table-column>
            <el-table-column prop="total" label="全职人数"> </el-table-column>
            <el-table-column prop="ps" label="备注"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">
                  编辑
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="del(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-dialog title="新增职务" :visible.sync="dialogFormVisible">
          <el-form :model="addForm">
            <el-form-item label="职务名称" label-width="120px">
              <el-input v-model="addForm.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="职务编码" label-width="120px">
              <el-input v-model="addForm.id" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="职务说明" label-width="120px">
              <el-input
                type="textarea"
                v-model="addForm.ps"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改职务" :visible.sync="dialogEditVisible">
          <el-form :model="editForm">
            <el-form-item label="职务名称" label-width="120px">
              <el-input v-model="editForm.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="职务编码" label-width="120px">
              <el-input v-model="editForm.id" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="职务说明" label-width="120px">
              <el-input
                type="textarea"
                v-model="editForm.ps"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditVisible = false">取 消</el-button>
            <el-button type="primary" @click="onEdit">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </transition>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysDuty",

  data() {
    return {
      tableData: [
        {
          id: 0,
          name: "PD",
          num: 5,
          total: 10,
          ps: "产品设计，负责产品设计，将产品从开始到完成起监督作用，而且还会参与产品的运营和推广等",
        },
        {
          id: 1,
          name: "PM",
          num: 5,
          total: 10,
          ps: "产品经理，负责针对某一项或是某一类的产品进行规划和管理等",
        },
        {
          id: 2,
          name: "开发",
          num: 5,
          total: 10,
          ps: "负责公司网站及互联网产品的建设和优化，也为公司移动应用提供数据服务和接口等",
        },
        {
          id: 3,
          name: "总监",
          num: 3,
          total: 5,
          ps: "第一监管人",
        },
        {
          id: 4,
          name: "总经理",
          num: 5,
          total: 5,
          ps: "董事会成员之一的董事，又是负责经营",
        },
        {
          id: 5,
          name: "经理",
          num: 9,
          total: 10,
          ps: "日常经营管理和行政事务的负责人",
        },
        {
          id: 6,
          name: "普通员工",
          num: 98,
          total: 100,
          ps: "一般职员",
        },
        {
          id: 7,
          name: "设计",
          num: 0,
          total: 10,
          ps: "公司策划",
        },
      ],
      addForm: {
        name: "",
        id: "",
        ps: "",
        num: 0,
        total: 0,
      },
      editForm: {
        name: "",
        id: "",
        ps: "",
        num: 0,
        total: 0,
      },
      flag: false,
      dialogFormVisible: false,
      dialogEditVisible: false,
    };
  },

  mounted() {
    setTimeout(() => {
      this.flag = true;
      //   this.getData()
    }, 100);
  },

  methods: {
    // async getData(){
    //   let {data} = await this.$axios.get('/organ/getOrgan')
    //   this.tableData = data.data
    // }
    del(obj) {
      // console.log(obj,'12121');
      if (obj.num > 0) {
        this.$notify.error({
          title: "错误",
          message: "该职务已关联人员，不能删除该职务",
        });
      } else {
        this.tableData = this.tableData.filter((item) => item.id != obj.id);
        this.$notify({
          type: "success",
          title: "成功",
          message: "删除成功",
        });
      }
    },
    edit(obj) {
      //   console.log(obj, "edit");
      this.editForm = obj;
      this.dialogEditVisible = true;
    },
    onSubmit() {
      // console.log(this.addForm);
      if (this.addForm.name) {
        this.tableData.push(this.addForm);
        this.dialogFormVisible = false;
        this.addForm = {
          name: "",
          id: "",
          ps: "",
          num: 0,
          total: 0,
        };
      }else{
        this.$notify.error({
          title: "错误",
          message: "请将数据填完整",
        });
      }
    },
    onEdit() {
      this.tableData.forEach((item) => {
        if (item.id === this.editForm.id) {
          item = this.editForm;
        }
      });
      this.dialogEditVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

// 动画
.animation-enter,
animation-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

.animation-enter-active {
  transition: all 0.5s ease-in-out;
}

.animation-enter-to,
animation-leave {
  transform: translateX(0);
  opacity: 1;
}
</style>